<!--
 * @Author: 郝奔 1425466221@qq.com
 * @Date: 2024-11-22 09:21:08
 * @LastEditors: 郝奔 1425466221@qq.com
 * @LastEditTime: 2024-12-26 13:46:06
 * @FilePath: /HG-dqbasic_open_platform/src/framework/components/base-comps/dt-overTooltip/index.vue
 * @Description: 
 * Copyright (c) 2024-present HBIS Digital Technology Co.,Ltd. All rights reserved. 
-->
<template>
    <div>
        <el-tooltip v-bind="$attrs" :disabled="isShowTooltip" :content="content">
            <p v-if="isBusiness" ref="overRef" class="over-flow" :class="className" @mouseover="onMouseOver()">
                <span ref="conRef">{{ content || "-" }}</span>
            </p>
            <template v-for="(_, name) in $slots" #[name]>
                <slot :name="name"></slot>
            </template>
        </el-tooltip>
    </div>
</template>
<script lang="ts" setup>
import { onMounted, ref } from 'vue'
defineOptions({
    name: "DtTooltip",
});
export interface PropsType {
    width?: number;
    content: string;
    className?: string;
    refName?: string;
    isBusiness?: boolean;
}
const props = withDefaults(defineProps<PropsType>(), {
    width: 0,
    content: '',
    className: '',
    refName: '',
    isBusiness: false,
})
const overRef = ref();
const conRef = ref();
const isShowTooltip = ref(false)
onMounted(() => {
    if (props.width) {
        overRef.value.style.maxWidth = props.width + 'px'
    }
})
function onMouseOver(): void {
    const el = overRef.value
    const parentWidth = props.width || el.offsetWidth
    // const parentWidth = 100
    if (!conRef.value) {
        return
    }
    const contentWidth = conRef.value.offsetWidth
    // 判断是否开启tooltip功能
    if (contentWidth > parentWidth) {
        isShowTooltip.value = false
    } else {
        isShowTooltip.value = true
    }
}
</script>